<template>
  <el-card class="card-box">
    <template #header>
        <div class="card-header">
          <span>店铺客流统计</span>
        </div>
    </template>

    <div class="text-item">
      <div class="list">
        <span>进店客流</span>
        <p>{{statisticData?.customerNum || 0}}</p>
      </div>

      <div class="list">
        <span>过店客流</span>
        <p>{{statisticData?.outerCustomerNum || 0}}</p>
      </div>

      <div class="list">
        <span>进店转化率</span>
        <p>{{toFixPercent(statisticData?.visitRatio || 0,2)}}</p>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { toFixPercent } from '@/utils/util'
  const props = defineProps({
    statisticData:{
      type:Object,
      default:()=>{}
    }
  })
</script>
<style lang="scss" scoped>
  .card-box{
    width: 33%;
    :deep(.el-card__body){
      height: 300px;
      .text-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        text-align: center;
        .list{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          span{
            font-size: 16px;
            color: #666;
          }
          p{
            margin:0;
            margin-top: 12px;
            font-size: 30px;
            color: #000;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>
